<template>
    <el-dialog :visible.sync="showAddModal" :append-to-body="true"
               :close-on-click-modal="false" width="40%"
               :close-on-press-escape="false" :show-close="false" class="ele-modal">
        <h4 slot="title">{{modalLabel}}</h4>
        <el-form :model="newForm" class="demo-form-inline" :rules="rules" ref="ruleForm">
            <el-row>
                <el-col :span="16">
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-radio-group v-model="newForm.type" @change="changeRadio">
                            <el-radio :disabled="!$isEmptyStr(newForm.menuId)" :label="0">目录</el-radio>
                            <el-radio :disabled="!$isEmptyStr(newForm.menuId)" :label="1">菜单</el-radio>
                            <!--                            <el-radio :label="2">按钮</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="newForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="parentId">
                        <el-select v-model="newForm.parentId" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in menuList"
                                :key="item.menuId"
                                :label="item.name"
                                :value="item.menuId">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="newForm.type === 1">
                <el-col :span="16">
                    <el-form-item label="菜单URL" :label-width="formLabelWidth" prop="url">
                        <el-input v-model="newForm.url" auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--            <el-row v-show="newForm.type !== 0">-->
            <!--                <el-col :span="16">-->
            <!--                    <el-form-item label="授权标识" :label-width="formLabelWidth">-->
            <!--                        <el-input v-model="newForm.perms" auto-complete="off"></el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
            <!--            </el-row>-->
            <el-row v-show="newForm.type !== 2">
                <el-col :span="16">
                    <el-form-item label="排序号" :label-width="formLabelWidth">
                        <el-input v-model="newForm.orderNum" auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="newForm.type !== 2">
                <el-col :span="16">
                    <el-form-item label="图标" :label-width="formLabelWidth">
                        <!--                        <el-input v-model="newForm.icon" auto-complete="off"></el-input>-->
                        <el-select v-model="newForm.icon" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in icons"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px"><i :class="item.value"></i></span>
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="row" style="text-align: center">
            <a class="revision-btn" href="javaScript:void(0)" @click="onSubmit">保 存</a>
            <a class="revision-btn-default" style="margin-left: 5px;" href="javaScript:void(0)" @click="onCancel">取
                消</a>
        </div>
    </el-dialog>
</template>

<script>

    export default {
        name: "addMenuModal",
        props: {
            showAddModal: {
                type: Boolean,
                default: false
            },
            editId: {
                type: String,
                default: ''
            }
        },
        data() {
            var validateUrl = (rule, value, callback) => {
                if (this.newForm.type === 1) {
                    if (!value) {
                        return callback(new Error('请输入菜单URL'));
                    }
                    callback();
                }
                callback();
            };
            return {
                modalLabel: '新增分类',
                newForm: {
                    menuId: '',
                    parentId: '',
                    parentName: '',
                    name: '',
                    url: '',
                    perms: '',
                    type: 1,
                    icon: '',
                    orderNum: 0,
                },
                formLabelWidth: '100px',
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [],
                uploadFiles: [],
                uploadFile: {},
                uploadUrl: '/sys/oss/upload',
                formData: {},
                rules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    url: [
                        {validator: validateUrl, trigger: 'blur'}
                    ]
                },
                menuList: [],
                icons: [{
                    value: 'fa fa-home',
                    label: '主页'
                }, {
                    value: 'fa fa-cog',
                    label: '配置'
                }, {
                    value: 'fa fa-user',
                    label: '客户'
                }, {
                    value: 'fa fa-cube',
                    label: '商品'
                }, {
                    value: 'fa fa-indent',
                    label: '订单'
                }, {
                    value: 'fa fa-users',
                    label: '团购'
                }, {
                    value: 'fa fa-inbox',
                    label: '推广'
                }, {
                    value: 'fa fa-cny',
                    label: '财务'
                }],
            }
        },
        mounted: function () {
            this.getMenuList();
        },
        methods: {
            onCancel() {
                this.$refs.ruleForm.resetFields();
                this.$emit('onCancelNewModal');
            },
            onSubmit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.$isEmptyStr(this.editId)) {
                            this.submitNewInfo();
                        } else {
                            this.submitEditInfo();
                        }
                    } else {
                        return false;
                    }
                });

            },
            handleRemove(file, fileList) {
                this.fileList = fileList;
            },
            handleExceed(file, fileList) {
                this.$message.warn('文件重复');
            },
            handleChange(file, fileList) {
                this.uploadFile = file.raw;
                this.fileList = fileList;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadRequest(file) {
                // this.subPicForm(param.raw);
                this.uploadFile = file.file;
                this.formData = new FormData();
                this.formData.append('file', this.uploadFile);
            },
            subPicForm() {
                this.$refs.upload.submit();
                this.submitUpload();
                let config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                }

            },
            async submitUpload(file) {
                let res = await this.$api.post(this.uploadUrl, this.formData);
                if (res.code === 0) {
                } else {
                    this.$message.error(res.msg);
                }
            },
            async getInfo(editId) {
                let res = await this.$api.get('/sys/menu/info/' + editId, {});
                if (res.code === 0) {
                    this.newForm.menuId = res.menu.menuId;
                    this.newForm.type = res.menu.type;
                    this.newForm.parentName = res.menu.parentName;
                    this.newForm.name = res.menu.name;
                    if (res.menu.parentId === 0) {
                        this.newForm.parentId = '';
                    } else {

                        this.newForm.parentId = res.menu.parentId;
                    }

                    /*if (res.menu.type === 1) {
                        this.newForm.url = res.menu.url;
                    }
                    if (res.menu.type !== 0) {
                        this.newForm.perms = res.menu.perms;
                    }
                    if (res.menu.type !== 2) {
                        this.newForm.icon = res.menu.icon;
                        this.newForm.orderNum = res.menu.orderNum;
                    }*/

                    this.newForm.url = res.menu.url;
                    this.newForm.perms = res.menu.perms;
                    this.newForm.icon = res.menu.icon;
                    this.newForm.orderNum = res.menu.orderNum;

                } else {
                    this.$message.error(res.msg);
                }
            },
            async submitEditInfo() {
                let res = await this.$api.post('/sys/menu/update', this.newForm);
                if (res.code === 0) {
                    this.$message.success('保存成功');
                    this.$refs.ruleForm.resetFields();
                    this.$emit('onSubmitNewModal');
                    this.menuList = [];
                    this.getMenuList();
                } else {
                    this.$message.error(res.msg);
                }
            },
            async submitNewInfo() {
                let res = await this.$api.post('/sys/menu/save', this.newForm);
                if (res.code === 0) {
                    this.$message.success('保存成功');
                    this.$refs.ruleForm.resetFields();
                    this.$emit('onSubmitNewModal');
                    this.menuList = [];
                    this.getMenuList();
                } else {
                    this.$message.error(res.msg);
                }
            },
            changeRadio() {
                this.$refs.ruleForm.resetFields();
                if (this.newForm.type === 1) {
                    this.menuList = [];
                    this.getMenuList();
                }
                if (this.newForm.type === 2) {
                    this.menuList = [];
                    this.getMenuList();
                }
            },
            async getMenuList() {
                let res = await this.$api.get('/sys/menu/menu-list', {});
                if (res.code === 0) {
                    this.menuList = [];
                    this.menuList = res.list;
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .ele-modal /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-radio__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
        font-weight: normal;
    }

    .ele-modal /deep/ .el-select {
        display: inline;
    }

    /deep/ .el-upload__input {
        display: none;
    }

    /deep/ .el-dialog__wrapper {
        z-index: 3000;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }
</style>
